<template>
    <div class="image_list">
        <div v-for="(item, index) in videoList.data" :key="index" class="item_box" @click="chooseImage(item, index)">
            <el-image :src="item.thumbnail_url" fit="cover" class="image"></el-image>
            <div class="item_title" :title="item?.file_name">{{ item?.file_name }}</div>
            <div class="cover" :class="{ icon_radar: item.is_radar == 1 }">
                <img src="@/assets/image/friendcirclemat/video_play_icon.png" alt="" @click.stop="playVideo(item)" />
            </div>
            <div class="icon_box">
                <img v-if="item.isCheck" src="@/assets/image/friendcirclemat/image_choose.png" alt="" />
            </div>
        </div>
    </div>
</template>
<script lang="ts" setup>
import emitter from '@/view/content/basematerial/video/common/js/mitt.js';
import { reactive, ref } from 'vue';
import { defineEmits, defineExpose, defineProps, watch } from 'vue';
import { isTextBeyond } from '@/utils/utils';
const emit = defineEmits(['getData']);
const props = defineProps(['pageData', 'chooseData']);
const videoList = reactive({ data: JSON.parse(JSON.stringify(props.pageData)) });
const chooseVideoArr = reactive({ data: JSON.parse(JSON.stringify(props.chooseData)) });
const chooseVideoIndex = ref(null);
watch(
    () => props.pageData,
    val => {
        videoList.data = JSON.parse(JSON.stringify(val));
    }
);
const chooseImage = (item, index) => {
    videoList.data.forEach((item, inx, data) => {
        item.isCheck = false;
    });
    item.is_local = 0;
    item.isCheck = true;
    chooseVideoArr.data = [item];
    emit('getData', {
        type: 'video',
        data: chooseVideoArr.data
    });
};
const getList = () => {};

// 播放视频
const playVideo = (item: object) => {
    emitter.emit('true');
    emitter.emit('url', item.absolute_url);
};

defineExpose({ getList });
</script>

<style lang="scss" scoped>
.image_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .item_box {
        cursor: pointer;
        width: 110px;
        margin-right: 11px;
        margin-bottom: 12px;
        position: relative;

        .image {
            width: 100%;
            height: 110px;
        }

        .icon_box {
            position: absolute;
            width: 16px;
            height: 16px;
            top: 6px;
            left: 6px;
            background: white;
            cursor: pointer;
            z-index: 100;

            &.active {
                border-radius: 50%;
            }

            img {
                width: 100%;
                height: 100%;
            }
        }

        .cover {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 1;
            background: rgb(0 0 0 / 40%);
            display: flex;
            justify-content: center;
            align-items: center;

            img {
                width: 30px;
                height: 30px;
            }
        }

        .item_title {
            font-size: 14px;
            line-height: 30px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
    }

    .item_box:nth-child(5n) {
        margin-right: 0;
    }

    .icon_radar {
        position: relative;

        &::after {
            content: '';
            width: 20px;
            height: 20px;
            background: url('@/assets/image/material/radar_red.png') no-repeat center;
            background-size: cover;
            position: absolute;
            top: 3px;
            left: 85px;
        }
    }
}
</style>
